//设置点击搜索事件（模糊查询）  （内含搜索接口）
var sousuobt = document.querySelector('.sousuobt');
var inputEle = document.querySelector('.sousuoin');
var xinzeng = document.querySelector('.xinzeng');
var tanchuang = document.querySelector('.tanchuang');
var tcbt = document.querySelector('.tcbt');
var tcins = document.querySelectorAll('.tcin');
var djy = document.querySelector('.djy');


var userinfo = JSON.parse(localStorage.getItem('userinfo'));
sousuobt.onclick = () => {
    axios.get('/user/sousuo', { params: { searchkey: inputEle.value } }).then((res) => {
        render(res.data.list)
    })
}

//登录完成之后用户的右上角名字渲染
document.querySelector('.yhname').innerHTML = userinfo.phone;


//設置刪除事件用事件委托
var tbody = document.querySelector('tbody');
tbody.onclick = (e) => {
    if (e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu')) {
        //观察知手机号有唯一性，即可给每个绑定上手机号，通过获取手机号向后端发送删除这个手机号的请求
        axios.post('/user/delete', { phone: e.target.dataset.phone }).then((res) => {
            //删除成功只是在后端数据中删除了，要再次请求删除后的数据并且重新渲染
            render(res.data.list)
        })
    }
}


//设置点击下一页事件
var xia = document.querySelector('.down')
var yeshu = 1
xia.onclick = () => {
    yeshu++
    axios.get('/user/fenye', { params: { page: yeshu, count: 5 } }).then((res) => {
        render(res.data.list)
        console.log(res.data);
    })
    //当前页数
    djy.innerHTML = yeshu;
}
//设置点击上一页事件
var shang = document.querySelector('.up')
shang.onclick = () => {
    yeshu--
    axios.get('/user/fenye', { params: { page: yeshu, count: 5 } }).then((res) => {
        render(res.data.list)
        console.log(res.data);
    })
    djy.innerHTML = yeshu;
}


//渲染列表
function render(data) {
    var str = ''
    str = data.map((item) => {
        return `<tr>
                    <td>${item.bianhao}</td> 
                    <td>${item.phone}</td>
                    <td>${item.ingroup}</td>
                    <td>序号</td>
                    <td> <span  class="zhuangtaise">${item.zhuangtai}</span></td>
                    <td>时间</td>
                    <td class="caozuo">
                        <span class="iconfont icon-bianji"></span>
                        <span class="iconfont icon-shanchu" data-phone="${item.phone}"></span>
                    </td>
                </tr>`
    }).join('')

    if (str == '') {
        str = '<div>没有更多的数据了哟!</div>'
    }
    document.querySelector('tbody').innerHTML = str;
}


//初始分页的请求接口
axios.get('/user/fenye', { params: { page: 1, count: 5 } }).then((res) => {
    render(res.data.list)
    // console.log(res.data);
})


//点击新增事件
xinzeng.onclick = () => {
    tanchuang.style.top = 200 + 'px'
    tanchuang.style.left = 500 + 'px'
}
//点击新增中的确定事件
tcbt.onclick = function () {
    tanchuang.style.top = -600 + 'px';
    axios.post('/user/add', {
        phone: tcins[0].value,
        pass: tcins[1].value,
    }).then((res) => {
        console.log(res.data);
        location.href = './首页.html';
    })
}